<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color: blueviolet; font-size: 22px; color:white;padding-top: 12px;">
               <el-icon><Grid /></el-icon> 智慧城市网格化治理云平台

                <div style="float: right;">
                    <el-icon><User /></el-icon>欢迎您, {{ pinia.loginDto.realName }}({{ pinia.loginDto.roleName }})
                    <el-button @click="logout" type="danger"><el-icon><SwitchButton /></el-icon></el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">

                    <el-menu active-text-color="#ffd04b" background-color="blueviolet" class="el-menu-vertical-demo"
                        default-active="1" text-color="#fff" router>
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>基础数据</span>
                            </template>

                            <el-menu-item index="log">日志管理</el-menu-item>
                            <el-menu-item index="adminsetting">管理员设置</el-menu-item>
                            <el-menu-item index="gridPersion">网格人员设置</el-menu-item>
                            <el-menu-item index="gridType">网格类型管理</el-menu-item> 
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>网格化管理</span>
                            </template>

                         <el-menu-item index="stepOne">   <el-icon><Guide /></el-icon>网格创建引导</el-menu-item>
                         <el-menu-item index="stepTwo">   <el-icon><Guide /></el-icon>层级设置</el-menu-item>
                         <el-menu-item index="stepThree">   <el-icon><Guide /></el-icon>创建网格</el-menu-item>
                         <el-menu-item index="stepFour">   <el-icon><Guide /></el-icon>创建网格队伍</el-menu-item>
                         <el-menu-item index="stepFive">   <el-icon><Guide /></el-icon>登录系统</el-menu-item>
                         <el-menu-item index="physical">   <el-icon><Guide /></el-icon>基础网格管理(物理)</el-menu-item>
                         <el-menu-item index="CascaderAndTree">   <el-icon><Guide /></el-icon>级联和树形一块练</el-menu-item>
                         <el-menu-item index="LogicalGrid">   <el-icon><Guide /></el-icon>基础网格管理(逻辑)</el-menu-item>
                         <el-menu-item index="Duty">   <el-icon><Guide /></el-icon>责任网格管理</el-menu-item>
                         <el-menu-item index="team">   <el-icon><Guide /></el-icon>网格队伍管理</el-menu-item>


                        </el-sub-menu>
                        <el-menu-item index="3">
                            <el-icon><icon-menu /></el-icon>
                            <span>网格化地图</span>
                        </el-menu-item>
                    </el-menu>

                </el-aside>
                <el-main>

                    <!-- <el-button @click="getWeekDayWrok()" type="danger">运动还是学习?</el-button> -->
                    <RouterView></RouterView>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="js">

import router from '@/router';
import { useCounterStore } from '@/stores/counter';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';

const pinia = useCounterStore();
const getWeekDayWrok = async () => {


    axios.defaults.headers.common['Authorization'] = 'Bearer ' + pinia.loginDto.jwtToken;
    try {
        const res = await axios.get('http://localhost:5141/api/Account/GetWeekDayWrok')
        ElMessage.success(res.data)
    } catch (err) {
        if (err.response.status == 401) {
            const resCode = await refreshToken();
            if (resCode == 200) {
                await getWeekDayWrok();
            }

        }
    }

}
//http://localhost:5141/api/Account/RefreshToken
const refreshToken = async () => {

    try {
        const res = await axios.get('http://localhost:5141/api/Account/RefreshToken',
            { params: { RefreshToken: pinia.loginDto.refreshToken, FingerPoint: navigator.userAgent } })
        console.log("刷新token接口的结果:", res)
        if (res.data.code == 200) {
            pinia.loginDto.accountName = res.data.data.accountName
            pinia.loginDto.jwtToken = res.data.data.jwtToken
            pinia.loginDto.realName = res.data.data.accountName
            pinia.loginDto.refreshToken = res.data.data.refreshToken
            pinia.loginDto.roleName = res.data.data.roleName
            return 200;
        } else {
            ElMessage.error('您的刷新token无效,请您重新登录!');
            router.push('/');
        }
    } catch (error) {
        console.error('刷新token失败', error);
        ElMessage.error('刷新token请求失败，请重新登录!');
        router.push('/');
        return 500;
    }

}


const logout = () => {
    ElMessageBox.confirm(
        '确认退出吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //把pinia的loginDTo对象清空
            //把用户登录信息存起来
            pinia.loginDto.accountName = ''
            pinia.loginDto.jwtToken = ''
            pinia.loginDto.realName = ''
            pinia.loginDto.refreshToken = ''
            pinia.loginDto.roleName = ''

            //跳转到登录页面
            router.push('/')
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}
</script>
